미리보기

• 변호사 지식 공유 커뮤니티 로이랜드와 종합 실업 급여 계산기 딸기시럽을 개발했습니다.

• 다른 회사로 부터 받는 외주 프로젝트에 프론트엔드 개발을 담당해 수송 관리 시스템과 모의 고사 강의 및 기출 문제 사이트 프로젝트를 경험했습니다.

• 팀원 ( 기획자 / 디자이너 / 백엔드 개발자 )과의 미팅을 통해 작업 진행도와 수정 사항을 서로 확인하고 스프레드시트로내용을 공유했습니다. 개발 일지를 작성하여 당일의 작업 내용과 내일 할 일, 그리고 특이 사항을 작성하여 프로젝트 일정을 관리했습니다.

• HTML / CSS / JavaScript / Jquery 를 사용했고 반응형 웹 퍼블리싱을 담당했습니다.

• 포토샵 및 일러스트로 되어있는 웹 디자인 파일을 참고하여 디자이너와 소통했습니다.

프로젝트 소개

딸기시럽은 종합 실업 급여 계산기입니다. 실업 급여 계산법은 정규직, 계약직, 특수 고용 형태, 예술인, 초단 시간, 자영업자 등 모든 근로 형태에 따라 다르게 적용되기 때문에 근로 형태에 따라 상세하게 실업 급여를 계산해주는 서비스입니다.

참조

• 깃허브 - https://github.com/godboy4256/strawberry-syrup-check

• 포트폴리오 - https://complex-somersault-3fd.notion.site/f9d2736680bb4a05ab64d0cf904db797

기술 스택

React , TypeScript , HTML, CSS , Recoil

팀 구성 및 나의 파트

기획 2명, 프론트엔드 1명, 백엔드 1명, 디자인 1명

프로젝트에서 했던 일과 과정

• 1인으로 프론트엔드 개발을 담당했고 서비스 기능 분석, 기술 스택 선정, 프론트엔드 폴더 구조와 라우팅 구조 설계, 전체 페이지 UI 퍼블리싱, 재사용 컴포넌트 분리, 계산 입력 인풋 개발, 계산 기능 구현을 담당했습니다.

• 디자인을 보고 input, select, date, modal, radio, button, checkbox,.. 등 계산에 필요한 입력 요소를 모두 재사용 컴포넌트로 분리하여 먼저 개발하고, 메인 컬러, 폰트 스타일과 크기, 레이아웃 정렬에 필요한 공용 class 로 정의하고 사용했습니다.

• 서비스 전체 페이지 UI 개발 ( 계산기 선택 페이지, 도움말 페이지, 각 계산기 입력 페이지, 결과 페이지 )

• 계산기 입력 데이터에 유효성 검사를 위한 공용 함수 개발했고 서버 통신 이전에 프론트엔드 측에서 먼저 유효성 검사를 해서 확실하게 결과를 받을 수 있는 입력 값이 있을때만 통신할 수 있도록 했고 불 필요한 백엔드 통신을 최소화했습니다.

• 계산기 입력 값을 받아서 백엔드의 계산 API를 호출하여 계산하고 결과를 페이지에 시각화했습니다.

• 로컬 스토리지를 사용해서 이전에 계산했던 결과를 저장 및 삭제하는 기능을 개발했습니다.

성과 및 회고

이 프로젝트는 프론트엔드 개발을 혼자 담당했는데 기획 회의에 참여해서 서비스를 분석한 후 프론트엔드 폴더 구조, 라우팅 구조 설계, 기술 스택 선정, 컴포넌트 분류, 디자이너 그리고 백엔드 개발자와 협업 및 조율까지 자세하게 직접 경험해 볼 수 있었습니다.

프로젝트 소개

모 언론사에서 제작하는 영어 모의고사 강의와 기출 문제를 구입할 수 있는 사이트입니다. 외주 프로젝트이며 기획/디자인, 백엔드 개발은 클라이언트사의 내부 개발자가 담당하고 프론트엔드 개발을 저희 회사에서 담당했던 프로젝트입니다.

참조

• 웹 사이트 - https://etest.chosun.com/index.html

• 포트폴리오 - https://complex-somersault-3fd.notion.site/95af54eaf45c4582b693ae7c4d7b9c03

기술 스택

HTML, CSS , JS, Jquery

팀 구성

프론트엔드 2명, 백엔드 2명, 웹 퍼블리셔 1명, 디자인 3명 , 기획 1명

프로젝트에서 했던 일과 과정

• NHN KCP 결제 모듈을 연동해 상품 결제 기능을 담당했습니다. 결제 모듈 플러그인을 필요한 페이지에 스크립트로 추가하고 해당 사이트의 코드, 인증서 키 값, 결제 방법( 카드, 계좌이체 등 ), 결제 금액 등 결제에 필요한 input 값을 포함한 form 태그를 해당 HTML에 추가했습니다. NHN KCP 측에서 제공하는 결제창 호출 함수를 해당 되는 form 태그를 인자값으로 주면서 실행하면 결제창을 불러올 수 있습니다. 결제창에서 결제가 완료되면 결제에 대한 결과를 받고 백엔드 서버의 결제 API 로 전달하여 결제 정보를 관리하고 NHN KCP 서버 쪽으로 결제 요청 및 결제 처리를 완료했습니다. 결제 정보는 영수증 처리와 유저의 결제 정보 페이지를 개발하는데 사용되었습니다.

• 장바구니 기능을 구현했습니다.

• 로그인과 로그아웃 기능을 구현했습니다. 아이디와 비밀번호 입력 값으로 로그인 API 를 호출하고, 응답으로 받은 세션 식별자와 유저의 고유 ID 를 세션 스토리지에 저장했습니다. 로그인 정보가 필요한 API 를 호출할 때 세션 식별자와 유저의 고유 ID 를 함께 포함하여 유저 정보와 세션의 유효성을 검사했습니다. 로그아웃을 하면 백엔드측에서 세션을 종료하고 브라우저의 세션 스토리지에서 세션 식별자와 유저 고유 ID를 삭제했습니다.

• 상품 목록 및 상품 상세 정보 불러오기

• 디자인 모달 창을 불러오는 공용 함수를 개발하여 팀원과 공유했습니다.

성과 및 회고

이 프로젝트는 프론트엔드 개발을 혼자 담당했는데 기획 회의에 참여해서 서비스를 분석한 후 프론트엔드 폴더 구조, 라우팅 구조 설계, 기술 스택 선정, 컴포넌트 분류, 디자이너 그리고 백엔드 개발자와 협업 및 조율까지 자세하게 직접 경험해 볼 수 있었습니다.